<!DOCTYPE html>
<html>
<head>
  <title>Animation demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="../helper.js"></script>

  <style type="text/css" media="screen">
    body {
      padding-left: 20px;
    }
    
    h1 {
      font-family: Verdana;
      clear: both;
    }

    .box {
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
      border-top: 1px solid #BBB;
      border-right: 1px solid #BBB;
      border-bottom: 1px solid #BBB;
      border-left: 1px solid #BBB;
      background-color: #F9F9F9;
      padding: 15px;
      margin-right: 20px;
      margin-top: 10px;
      margin-bottom: 10px;
      float: left;
      text-align: center;
    }

    .innerbox {
      background-color: #bbb;
    }

    .orig {
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
      border : 1px dashed blue;
      color: white;
      padding: 15px;
      margin-right: 20px;
      margin-top: 10px;
      margin-bottom: 10px;
      float: left;
      text-align: center;
    }

    .container {
      position: absolute;
    }
    
    .row {
      padding-left: 30px;
      height: 70px;
    }

    body {
      margin: 20px;
    }
  </style>
</head>
<body>
  <h1>Transform Functions</h1>
  <div class="row">
    <div class="container">
      <div class="orig">Scale</div>
      <div class="orig">Translate</div>
      <div class="orig">Rotate</div>
      <div class="orig">Skew</div>
      <div class="orig">Combination</div>
    </div>
    <div class="container">
      <div id="scale" class="box">Scale</div>
      <div id="translate" class="box">Translate</div>
      <div id="rotate" class="box">Rotate</div>
      <div id="skew" class="box">Skew</div>
      <div id="combo" class="box">Combination</div>
    </div>
  </div>



  <h1>Transform Origin</h1>
  <div class="row">
    <div class="container">
      <div class="orig">center</div>
      <div class="orig">left bottom</div>
      <div class="orig">right top</div>
    </div>
    <div class="container">
      <div id="origin-c" class="box">center</div>
      <div id="origin-lb" class="box">left bottom</div>
      <div id="origin-rt" class="box">right top</div>
    </div>
  </div>


  <div id="3dpart">
    <h1>Transform Style</h1>
    <div class="row">
      <div class="container">
        <div class="orig">flat</div>
        <div class="orig">preserve-3d</div>
      </div>
      <div class="container">
        <div id="flat" class="box"><div class="innerbox">flat</div></div>
        <div id="3d" class="box"><div class="innerbox">preserve-3d</div></div>
      </div>
    </div>
    
    <h1>Perspective</h1>
    <div class="row">
      <div class="container">
        <div class="orig">10</div>
        <div class="orig">100</div>
        <div class="orig">500</div>
        <div class="orig">1000</div>
      </div>
      <div class="container">
        <div id="perspective30" style="float: left"><div class="box">30</div></div>
        <div id="perspective100" style="float: left"><div class="box">100</div></div>
        <div id="perspective500" style="float: left"><div class="box">500</div></div>
        <div id="perspective1000" style="float: left"><div class="box">1000</div></div>
      </div>
    </div>
    
    
    <h1>Perspective Origin</h1>
    <div class="row">
      <div class="container">
        <div class="orig">center</div>
        <div class="orig">bottom left</div>
        <div class="orig">bottom right</div>
      </div>
      <div class="container">
        <div id="perorig-c" style="float: left"><div class="box">center</div></div>
        <div id="perorig-bl" style="float: left"><div class="box">bottom left</div></div>
        <div id="perorig-br" style="float: left"><div class="box">bottom right</div></div>
      </div>
    </div>
    
    
    <h1>Backface Visibility</h1>
    <div class="row">
      <div class="container">
        <div class="orig">visible</div>
        <div class="orig">hidden</div>
      </div>
      <div class="container">
        <div id="visible" class="box">visible</div>
        <div id="hidden" class="box">hidden</div>
      </div>
    </div>
  </div>
</body>
</html>